<template>
  <div>
    <!-- <MyInput type="text" v-model="value" :searchList="list" :searchAction="true" @search="search">
      <template #icon>
        <i class="el-icon-share"></i>
      </template>
    </MyInput> -->
    <!-- <MyInput v-model="value" :searchList="list" searchAction="/node/myinput/inputList" @search="search"></MyInput> -->
    <MyInput class="MyInput" v-model="value" :clearable="true" :searchAction="true" :searchList="list" @search="search"></MyInput>
    <!-- 使用node的接口 -->
    <!-- <MyInput class="MyInput" v-model="value" :clearable="true" searchAction="/node/myinput/inputList"></MyInput> -->
     <!-- 使用mock接口 -->
    <!-- <MyInput class="MyInput" v-model="value" :clearable="true" searchAction="/mock/user/inputList"></MyInput> -->
    
    <button @click="setVal">设置值</button>
    <button @click="getVal">获取值</button>
    <div>
      <el-button @click="onClick">+1</el-button>
      <div>obj-obj1-num: {{ obj.obj1.num }}</div>
      <div>computed-- {{ cNum }}</div>
    </div>
    <h1>h1111111</h1>
    <div class="div1">
      <h1>h111111111111</h1>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { getNodeMyInputList } from "@/utils/api.js" 
export default {
  data () {
    return {
      value: '',
      list: [],
      obj: {
        obj1: {
          num: 0
        }
      }
    }
  },
  computed: {
    cNum: function (params) {
      return this.obj.obj1.num + 2
    }
  },
  components: {
    MyInput: ()=>import('@/components/myInput.vue')
  },
  mounted() {
    // this.search()
  },
  methods: {
    onClick() {
      this.obj.obj1.num += 1
      
    },
    search(val) {
      // 获取mock的模拟数据
      axios({
        method: "get",
        url: '/mock/user/inputList',
        data: {
          val: val,
        }
      })

      // // 获取node生成接口的数据
      // getNodeMyInputList(
      //   {
      //     val: val
      //   }
      // )
      .then(res => {
        this.list = res.data.list
      })
    },
    setVal() {
      this.value = '9998'
    },
    getVal() {
      console.log('获取值', this.value)
    },
  },
}

</script>
<style scoped lang='less'>
.MyInput {
  width: 200px!important;
}
.div1 {
  color: red;
  // font-size: 30px;
}
</style>